<template>
  <div class="container">
    <div class="user-info">
      <block v-if="me">
        <img class="icon-avator" :src="me.avatar"/>
        <div class="info">
          <span class="name">{{me.nickname}}</span>
        </div>
      </block>
      <block v-if="!me">
          <img class="icon-avator" src="https://ws1.sinaimg.cn/large/006tKfTcly1g0m60tqd8rj304s04s0sj.jpg"/>
          <div class="info" data-name="login" >
            <span class="name">未登录</span>
            <span class="type" data-name="login" @click="onTarget">点击登录账号</span>
          </div>
      </block>
    </div>
    <div class="user-links">
      <div class="item" @click="goToOrder(1)">
        <van-icon name="pending-payment"/>
          <p>待付款</p>
        </div>
      <div class="item" @click="goToOrder(2)">
        <van-icon name="send-gift-o"/>
        <p>待发货</p>
      </div>
      <div class="item" @click="goToOrder(3)">
        <van-icon name="logistics"/>
        <p>已发货</p>
      </div>
      <div class="item" @click="goToOrder(4)">
        <van-icon name="completed"/>
        <p>已完成</p>
      </div>
    </div>
    <van-cell-group class="group">
      <van-cell title="全部订单" icon="orders-o" is-link @click="goToOrder(0)"></van-cell> 
      <van-cell title="收货地址" icon="location-o" is-link data-name="address"  @click="onTarget"></van-cell>
      <van-cell title="我的资料" icon="edit" is-link data-name="edit" @click="onTarget"></van-cell> 
      <van-cell title="我的红包" icon="point-gift-o" is-link data-name="red-packet" @click="onTarget"></van-cell> 
      <van-cell title="设置密码" icon="closed-eye" is-link data-name="change-password" @click="onTarget"></van-cell> 
      <van-cell v-if="me" title="修改手机号"  icon="phone-circle-o" is-link url="/pages/user/change-phone" ></van-cell> 
      <van-cell v-if="me" title="邀请我的店主" icon="shop-o" url="/pages/user/set-invite" :value="me.invite_user_nickname ? me.invite_user_nickname : '设置'"></van-cell>
      <van-cell v-if="me && me.invite_code" title="我的小程序码" icon="qr" value="查看" @click="previewImage"></van-cell>
      <van-cell title="帮助中心" icon="service-o" is-link url="/pages/user/help"></van-cell>
      <van-cell icon="contact" is-link>
        <view slot="title" class="contact-btn">
          <button open-type="contact" :session-from="userMsg" @contact="handleContact">在线客服</button>
        </view>
      </van-cell>
      <van-cell title="解绑并退出" v-if="me && me.phone" icon="replay" is-link @click="onLoginOut"></van-cell> 

    </van-cell-group>
      <div class="version">美控家版权所有v0.7.1</div>
    <van-toast id="van-toast" />
  </div>
</template>
<script>
import {mapState} from 'vuex'
import * as UserAction from '@/api/user'
import Toast from 'vant-weapp/dist/toast/toast'

export default {
  data () {
    return {
      userMsg: {},
      userInfo: null
    }
  },
  computed: mapState(['me']),
  methods: {
    goToOrder (index) {
      if (!this.me) {
        wx.navigateTo({ url: '../auth/login-index' })
      } else {
        wx.navigateTo({url: '../order/list?status=' + index})
      }
    },
    handleContact (e) {
      let path = e.mp.detail.path
      let query = e.mp.detail.query
      let params = ''
      if (path && query) {
        for (let key in query) {
          params = params + key + '=' + query[key] + '&'
        }
        params = params.slice(0, params.length - 1)
      } else return false
      wx.navigateTo({ url: path + '?' + params })
    },
    onLoginOut () {
      UserAction.unbind().then(() => {
        wx.removeStorageSync('token')
        this.$store.commit('set_me', null)
      }).catch(err => Toast(err.msg))
    },
    previewImage () {
      if (!this.me.invite_code) {
        Toast('您没有邀请码')
        return false
      }
      wx.previewImage({ urls: ['https://h5.myconplus.com/image-render/mp-inviter-qr?c=' + this.me.invite_code] })
    },
    onTarget (e) {
      switch (e.currentTarget.dataset.name) {
        case 'edit':
          if (!this.me) {
            wx.navigateTo({ url: '../auth/login-index' })
          } else {
            wx.navigateTo({ url: '../user/edit' })
          }
          break
        case 'address':
          if (!this.me) {
            wx.navigateTo({ url: '../auth/login-index' })
          } else {
            wx.navigateTo({ url: '../user/address' })
          }
          break
        case 'login':
          wx.navigateTo({ url: '../auth/login-index' })
          break
        case 'red-packet':
          if (!this.me) {
            wx.navigateTo({ url: '../auth/login-index' })
          } else {
            wx.navigateTo({ url: './red-packet' })
          }
          break
        case 'change-password':
          if (!this.me) {
            wx.navigateTo({ url: '../auth/login-index' })
          } else {
            wx.navigateTo({ url: './change-password' })
          }
          break
      }
    },
    getWxInfo () {
      let that = this
      wx.getUserInfo({
        lang: 'zh_CN',
        success: function (res) {
          that.userInfo = res.userInfo
          that.userMsg = {
            nickName: res.userInfo.nickName,
            avatarUrl: res.userInfo.avatarUrl
          }
          that.userMsg = JSON.stringify(that.userMsg)
          if (that.me && !that.me.avatar) that.storeProfile()
        },
        fail: console.error
      })
    },
    storeProfile () {
      let data = {
        avatar: this.userInfo.avatarUrl,
        nickname: this.userInfo.nickName,
        region: `${this.userInfo.province} ${this.userInfo.city}`
      }
      UserAction.storeProfile(data).then(data => {
        this.$store.commit('set_me', data)
      }).catch(err => Toast(err.msg))
    }
  },
  onLoad () {
    if (this.me && this.me.avatar) {
      this.userMsg = {
        nickName: this.me.nickname,
        avatarUrl: this.me.avatar
      }
      this.userMsg = JSON.stringify(this.userMsg)
    } else {
      this.getWxInfo()
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  background: #F8F8F8;
  width: 100%;
  height: 100%;
   .user-info {
    text-align: center;
    display: flex;
    padding: 1.8em 0;
    background: url('http://static.catone-vip.com/20190228/5c778d2c90f2a');
    background-size: 100% 100%;
    .icon-avator {
      width:150rpx;
      height:150rpx;
      border-radius:50%;
      display:block;
      margin:0 40rpx;
    }
    .info {
      padding:20rpx 0;
      text-align:left;
      color:#fff;
      font-size:28rpx;
      display:flex;
      justify-content:center;
      flex-flow:column nowrap;
      .name {
        font-size:30rpx;
        color: #232E2A;
        margin: 15rpx 0;
      }
      .type {
        color:#86797F;

      }
    }
  }
  .user-links {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    box-sizing: border-box;
    background: #ffffff;
    margin-bottom:20rpx;
    .item {
      padding:20rpx 0;
      width:24%;
      text-align:center;
      font-size:38rpx;
      p {
        font-size: 20rpx;
      }
    }
    .item:active {
      cursor: pointer;
      background: #E8E8E8;
    }
  }
  .contact-btn {
      width:615rpx;
      text-indent:-1em;
      button {
        line-height:1.8;
        font-size:28rpx;
        color: #484848;
        background:transparent;
        text-align: left;
      }
    }
  .btn{
    margin: 20rpx 10rpx;
  }
  .version {
    text-align:center;
    background:#fff;
    font-size:20rpx;
    padding: 64rpx 0;
    color:#CDCDCD;
  }
}
</style>

